<template>
	<div class="mail-send-send-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1000px">

			<el-card shadow="hover">
				<el-form :model="state.ruleForm" ref="malledisdiaFormRef" :rules="rules" size="default" label-width="100px">
					<!-- <el-row :gutter="35"> -->

					<div style="display:flex;">
						<el-form-item label="发送地址" prop="email" :rules="[{ type: 'email', message: '邮箱格式错误', trigger: 'change' }]">
							<el-input clearable v-model="state.ruleForm.from" class="input-width" placeholder="邮箱用户名" disabled></el-input>
						</el-form-item>
						<el-form-item label="接收地址">
							<el-input clearable v-model="state.ruleForm.to" class="input-width" placeholder="发送地址(仅一个地址)"></el-input>
						</el-form-item>
					</div>

					<!-- </el-row> -->
				</el-form>


			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="mailsendeditdialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';

// 导入接口
import { useMailApi } from "../../../api/mail";
const malledisdiaFormRef = ref();


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const rules = {
	userName: [
		{
			required: true,
			message: "不能为空，请重新输入！",
			trigger: "blur"
		},
		{ min: 2, max: 50, message: "长度在2到50个字符", trigger: "blur" }
	],
	password: [
		{
			required: true,
			message: "不能为空，请重新输入！",
			trigger: "blur"
		},
		{ min: 6, max: 50, message: "长度在6到50个字符", trigger: "blur" }
	],
	roleCode: [
		{
			required: true,
			message: "不能为空，请选择！",
			trigger: "blur"
		}
	]
}

const state = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式

	isEdit: false,
	ruleForm: {
		from: "",
		to: "",
	} as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

// 打开弹窗
const openDialog = async (type: string, row?: any) => {
	if (type === 'send') {
		state.ruleForm = {
			from: row.userName,
		}

		state.dialog.title = '发送测试邮件';
		state.dialog.submitTxt = '发送';
	} else {
		state.dialog.isShowDialog = false;
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};


// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {
	// 检查顶层表单
	malledisdiaFormRef.value.validate(async (valid: any) => {
		if (valid) {
			//检查参数列表
			try {
				await useMailApi().toMailbox(state.ruleForm.to, state.ruleForm.from)
				ElMessage.success("操作成功");
				closeDialog(); // 关闭弹窗
				emit('refresh');
			} catch (error: any) {
				ElMessage.error(error.msg);
			}

		} else {
			ElMessage.warning("请检查数据的正确性！");
		}
	})
};

watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {
		}
	}, { immediate: true }
);

// 暴露变量
defineExpose({
	openDialog,
});


</script>











<style lang="scss">
.el-select {
	width: 100% !important;
}

.el-form .el-form-item:last-of-type {
	margin-bottom: 22px !important;
}


.mail-send-send-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}


	.alig_container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&>div {
			margin: 15px 0px;
			display: flex;
			justify-content: center;
		}
	}
}
</style>